<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link rel="stylesheet" href="./res/layui/css/layui.css">

</head>
<body>
<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
    <li class="layui-nav-item"><button class="layui-btn layui-btn-primary layui-border-blue"><a href="login.html">登录</a></button></li>
    <li class="layui-nav-item"><a href="https://www.baidu.com/">网页</a></li>
    <li class="layui-nav-item"><a href="https://www.baidu.com/?fr=tieba">资讯</a></li>
    <li class="layui-nav-item"><a href="https://baidu.com">视频</a> </li>
    <li class="layui-nav-item"><a href="https://image.baidu.com/">图片</a></li>
</ul>

<div class="layui-carousel" id="ID-carousel-demo-set" lay-filter="filter-demo-carousel-set" style="margin: auto">
    <div carousel-item>
        <div><a href="https://www.bilibili.com/blackboard/era/NSZJkjms68hZiueI.html?spm_id_from=333.1007.0.0"><img src="res/images/p3.png"></a></div>
        <div><a href="https://space.bilibili.com/97213827?spm_id_from=333.337.0.0"><img src="res/images/p1.png"></a></div>
        <div><a href="https://www.bilibili.com/blackboard/era/tGfF13RWnsjmmv9d.html?spm_id_from=333.337.0.0"><img src="res/images/p2.png"></a></div>
        <div><a href="https://www.bilibili.com/bangumi/play/ep825529?spm_id_from=333.1007.0.0"><img src="res/images/p4.png"></a></div>
        <div><a href="https://www.bilibili.com/bangumi/play/ep817500?spm_id_from=333.1007.0.0"><img src="res/images/p5.png"></a></div>
    </div>
</div>

<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header"><a href="html/post1.html">轻松职场</a></div>
                <div class="layui-card-body">
                    卡片式面板面板通常用于非白色背景色的主体内<br>
                    从而映衬出边框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">职场文化</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">提升充电</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">财富人生</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">求职门道</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">职场文化</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">诚信社区</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">寻求帮助</div>
                <div class="layui-card-body">
                    结合 layui 的栅格系统<br>
                    轻松实现响应式布局
                </div>
            </div>
        </div>
    </div>
</div>



<script src="./res/layui/layui.js"></script>
<script>
    layui.use(function(){
        var carousel = layui.carousel;
        var form = layui.form;
        var util = layui.util;
        var $ = layui.$;
        // 渲染
        var carInst = carousel.render({
            elem: '#ID-carousel-demo-set'
        });
        // 开关事件
        form.on('switch(autoplay)', function(){
            // 重载轮播
            carInst.reload({
                autoplay: this.checked
            });
        });
        // 自动播放控制
        form.on('select(autoplay)', function (obj) {
            // debugger;
            var autoplayValue = parseInt(obj.value);
            // 重载轮播
            carInst.reload({
                autoplay: isNaN(autoplayValue) ? obj.value : autoplayValue
            });
        });
        // 输入框事件
        $('.carousel-demo-set').on('input propertychange', function(){
            var value = this.value;
            var options = {};
            //if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            carInst.reload(options); // 重载轮播
        });
        // 普通事件
        util.on('lay-on', {
            "carousel-set": function(othis){
                var THIS = 'layui-bg-normal';
                var key = othis.data('key');
                var options = {};

                othis.css('background-color', '#16b777').siblings().removeAttr('style');
                options[key] = othis.data('value');
                carInst.reload(options); // 重载轮播
            }
        });
    });
</script>
</body>
</html>